<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
.canvas{
	border:1px solid #333;
	cursor:pointer;
	display:block;
	margin:0 auto;
	margin-bottom:10px;
}
</style>
</head>

<body>
<div class="canvasbox">
    <canvas id="myCanvas" class="canvas"></canvas>
</div>
<script>
var canvas=document.getElementById('myCanvas');//获取画布
var ctx=canvas.getContext('2d');//用于在画布上绘图的环境
var devicePixelRatio = window.devicePixelRatio || 1;//获取屏幕的ppi
var blockSize = 32*devicePixelRatio;//每格像素
var ctxW = 15;//宽多少格
var ctxH = 15;//高多少格
canvas.width=ctxW*blockSize;//设定画布宽度，就是格子*每格像素
canvas.height=ctxH*blockSize;//设定画布高度，就是格子*每格像素
canvas.style.width = ctxW*blockSize/devicePixelRatio + "px";
canvas.style.height = ctxH*blockSize/devicePixelRatio +"px";

var imgSrc = [
	"img/mytank.png"
]
var images = [];

ctx.font = String(14*devicePixelRatio)+"px Courier New";//设定字体
ctx.fillStyle = "#333";//设定字颜色
ctx.textAlign="center";//设定字居中
ctx.fillText("读取中...", Math.round(ctxW*blockSize/2), 50*devicePixelRatio);

var tankHeight = 68;
var sx = 2;
var sy = 16;
var swidth =46;
var sheight = 68;
var animateFPS = 0;
var animateFPSFlag = false;
var turnStat = 0;

var tank = [];
//人物[X，Y，宽，高，状态,裁切x，裁切y，裁切宽度,裁切高度]

var fps = null;
var tankFPSAnimeTime = null;

var leftAnime = null; 
var rightAnime = null; 

var leftFlg  = false;
var upFlg    = false;
var downFlg  = false;
var rightFlg = false;

var walkSpeed = 1.5;

function init(){
	clearInterval(fps);//清除刷新画布定时器
	clearInterval(tankFPSAnimeTime);
	leftFlg  = false;
	upFlg    = false;
	downFlg  = false;
	rightFlg = false;
	animateFPSFlag = false;
	
	sx = 0;
	sy = 0;
	swidth =32;
	sheight = 32;
	animateFPS = 0;
	turnStat = 0;

	tankHeight = 68;
	tank = [0,0,32*devicePixelRatio,32*devicePixelRatio,0,sx,sy,swidth,sheight];
	fps = setInterval(function(){//60fps刷新画布
		ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
		myWalker();
		paintBG();
		paintMy();
	},1000/60);
	
}

function loading(){
	var imgLength = imgSrc.length;
	var loadingNum = 0;
	for(var i=0;i<imgLength;i++){
		images[i] = new Image();
		images[i].src = imgSrc[i];
		images[i].onload = function(){
			loadingNum++;
			if(loadingNum===imgLength){
				loadingOK();
			}
		}
	}
}

function loadingOK(){
	ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
	ctx.font = String(14*devicePixelRatio)+"px Courier New";//设定字体
	ctx.fillStyle = "#333";//设定字颜色
	ctx.textAlign="center";//设定字居中
	ctx.fillText("点击开始游戏", Math.round(ctxW*blockSize/2), 50*devicePixelRatio);
	canvas.onclick=function(event){
		init();
	};
}

function paintBG(){
	ctx.fillStyle="#000000";//设定我方颜色
	ctx.fillRect(0,0,ctxW*blockSize,ctxH*blockSize);
}
function paintMy(){
	var tankX = tank[0];
	var tankY = tank[1];
	var tankW = tank[2];
	var tankH = tank[3];
	
	var tankSX = tank[5];
	var tankSY = tank[6];
	var tankSwidth =tank[7];
	var tankSheight =tank[8];
	
	ctx.drawImage(images[0],tankSX+(turnStat*32),tankSY+(animateFPS*32),tankSwidth,tankSheight,tankX,tankY,tankW,tankH);
}

function tankeWalkAnime(){
	animateFPS++;
	if(animateFPS>1){
		animateFPS = 0;
	}
}
function goTankWalk(){
		if(!animateFPSFlag){
			animateFPSFlag = true;
			tankFPSAnimeTime = setInterval(function(){
				tankeWalkAnime();
			},50);
		}
}
function myWalker(){
	if (rightFlg){
		goTankWalk();
		if(tank[0]>=ctxW*blockSize-blockSize){
			return false;
		}else{
			tank[0] = tank[0]+walkSpeed*devicePixelRatio;
		}
	}
	if (upFlg){
		goTankWalk();
		if(tank[1]<=0){
			return false;
		}else{
			tank[1] = tank[1]-walkSpeed*devicePixelRatio;
		}
	}
	if (downFlg){
		goTankWalk();
		if(tank[1]>=ctxH*blockSize-blockSize){
			return false;
		}else{
			tank[1] = tank[1]+walkSpeed*devicePixelRatio;
		}
	}
	if (leftFlg){
		goTankWalk();
		if(tank[0]<=0){
			return false;
		}else{
			tank[0] = tank[0]-walkSpeed*devicePixelRatio;
		}
	}
}

document.onkeydown=function(event){//绑定键盘事件按下
	var e = event || window.event || arguments.callee.caller.arguments[0];
	
	if(e && e.keyCode==65){//左a
		turnStat = 2;
		leftFlg  = true;
		
		rightFlg = false;
		upFlg    = false;
		downFlg  = false;
	}
	if(e && e.keyCode==68){//右d
		turnStat = 3;
		rightFlg = true;
		
		leftFlg  = false;
		upFlg    = false;
		downFlg  = false;
	}
	
	if(e && e.keyCode==87){//上w
		turnStat = 0;
		upFlg    = true;
		
		leftFlg  = false;
		rightFlg    = false;
		downFlg  = false;
	}
	
	if(e && e.keyCode==83){//下s
		turnStat = 1;
		downFlg  = true;
		
		leftFlg  = false;
		rightFlg    = false;
		upFlg  = false;
	}
	if(e && e.keyCode==32){//空格
		
	}
	
}
document.onkeyup=function(event){//绑定键盘事件弹起
	var e = event || window.event || arguments.callee.caller.arguments[0];
	
	if(e && e.keyCode==65){//左a
		leftFlg  = false;
		animateFPSFlag = false;
		clearInterval(tankFPSAnimeTime);
		tank[4] = 0;
	}
	if(e && e.keyCode==68){//右d
		rightFlg = false;
		animateFPSFlag = false;
		clearInterval(tankFPSAnimeTime);
		tank[4] = 0;
	}
	
	if(e && e.keyCode==87){//上w
		upFlg    = false;
		animateFPSFlag = false;
		clearInterval(tankFPSAnimeTime);
		tank[4] = 0;
	}
	
	if(e && e.keyCode==83){//下s
		downFlg  = false;
		animateFPSFlag = false;
		clearInterval(tankFPSAnimeTime);
		tank[4] = 0;
	}
	if(e && e.keyCode==32){//空格
		
	}
}

loading();
</script>
</body>
</html>
